@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

.tableHeaderResizeHandle {
  cursor: ew-resize;

  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  transform: translateX(50%);

  width: $dimension-1m;
  height: 100%;

  opacity: 0;

  &::after {
    content: '';

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: $border-width-table;
    height: 100%;

    background-color: $sys-neutral-decor-hovered;
  }

  &[data-resizing] {
    opacity: 0;
  }
}

.tableHeaderResizeIndicator {
  cursor: col-resize;

  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  transform: translateX(var(--offset));

  width: 1px;
  height: 100%;

  background-color: $sys-neutral-decor-activated;

  &::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);

    width: calc(100% + $dimension-4m);
    height: 100%;
  }
}

.tableHeaderCell {
  @include composite-var($table-head-column);

  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  width: 100%;

  background-color: inherit;

  &::after {
    pointer-events: none;
    content: '';

    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: calc(100% - $space-table-head-separator-padding * 2);
    height: $border-width-table;

    background-color: $sys-neutral-decor-default;
  }

  &:hover {
    .tableHeaderResizeHandle:not([data-resizing]) {
      opacity: 1;
    }
  }

  &[data-sortable] {
    cursor: pointer;
  }

  &[data-no-offset] {
    &::after {
      left: 0;
      transform: none;
      width: calc(100% - $space-table-head-separator-padding);
    }
  }

  &[data-no-padding] {
    padding: 0;

    &::after {
      width: 100%;
    }
  }

  &[data-resizing] {
    user-select: none;
  }

  &[data-align='right'] {
    justify-content: flex-end;
  }

  &[data-pin-position='right'] {
    &:last-child {
      overflow: hidden;

      .tableHeaderResizeHandle {
        right: 0;
        transform: none;
      }

      .tableHeaderResizeIndicator {
        right: calc($dimension-1m / 2);
      }
    }
  }
}

.tableHeaderCellMain {
  overflow: auto;
  display: flex;
  align-items: center;

  box-sizing: border-box;
  min-width: 0;
}

.tableHeaderCellName {
  @include composite-var($table-head-name-layout);

  display: inline-flex;
  align-items: center;

  box-sizing: border-box;
  min-width: 0;

  color: simple-var($sys-neutral-text-light);
}

.tableHeaderIcon {
  display: flex;
  box-sizing: border-box;
  color: simple-var($sys-neutral-text-light);

  svg {
    width: simple-var($icon-xs) !important; /* stylelint-disable-line declaration-no-important */
    height: simple-var($icon-xs) !important; /* stylelint-disable-line declaration-no-important */
  }
}
